<template>
	<view class="home">
    <view class="head">
      <view>
        <image class="logo" src="../../../static/logo.png"></image>
        <text class="title">Acme Design</text>
      </view>
      <text class="brief">极致设计、交互、体验 uni-app 组件库</text>
    </view>
    
    <view class="index-title">基础组件</view>
    <view class="button-group">
      <view class="button" v-for="(item, index) in widgetsList" :key="index" @click="goPage(item.url)">
        <view class="left-wrap">
          <view class="iconfont">{{item.icon}}</view>
          <view class="text">
            <text>{{item.title}}</text>
          </view>
        </view>
        <uni-icons class="icon" type="arrowright" size="16" color="#C0C0C0"/>
      </view>
    </view>
    <view class="index-title">业务组件</view>
    <view class="button-group">
      <view class="button" v-for="(item, index) in businessList" :key="index" @click="goPage(item.url)">
        <view class="left-wrap">
          <view class="iconfont">{{item.icon}}</view>
          <view class="text">
            <text>{{item.title}}</text>
          </view>
        </view>
        <uni-icons class="icon" type="arrowright" size="16" color="#C0C0C0"/>
      </view>
    </view>
	</view>
</template>

<script>
  import { WIDGETS_LIST, BUSINESS_LIST } from '../../../mocks/homeData.js'
  
	export default {
		data() {
			return {
				widgetsList: WIDGETS_LIST,
        businessList: BUSINESS_LIST
			}
		},
    onShow() {
      // // #ifdef APP-PLUS
      //   plus.navigator.setFullscreen(true)
      // // #endif
    },
		onLoad() {
      // #ifdef APP-PLUS
        plus.screen.lockOrientation('portrait-primary')
      // #endif
		},
    onHide() {
      // // #ifdef APP-PLUS
      //   plus.navigator.setFullscreen(false)
      // // #endif
    },
		methods: {
      goPage(url) {
        uni.navigateTo({
          url
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
  .home {
    padding: calc(85upx + var(--status-bar-height)) 40upx 60upx 40upx;
    box-sizing: border-box;
    background-color: #fff;
    letter-spacing: 0.15px;
    
    .head {
      padding: 0 10px;

      >view {
        display: flex;
        align-items: center;

        .logo  {
          width: 85upx;
          height: 60upx;
        }
        
        .title {
          color: #333;
          font-size: 50upx;
          line-height: 1;
          font-weight: 500;
          margin-left: 30upx;
        }
      }

      .brief {
        display: block;
        color: rgba(69, 90, 100, 0.6);
        font-size: 28upx;
        font-weight: 500;
        margin-top: 15upx;
      }
    }
    
    .index-title {
      color: rgba(69, 90, 100, 0.6);
      font-size: 28upx;
      line-height: 16px;
      margin: 80upx 0 0 20upx;
    }
    
    .button-group {
      margin: 30upx 0 15upx 0;

      .button {
        height: 86upx;
        // padding: 0 35upx 0 45upx;
        padding: 0 25upx 0 8upx;
        margin-bottom: 30upx;
        position: relative;
        color: #333;
        font-size: 28upx;
        font-weight: 500;
        line-height: 40px;
        border-radius: 50upx;
        background: #f7f8fa;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left-wrap {
          display: flex;
          align-items: center;
          
          .iconfont {
            width: 70upx;
            height: 70upx;;
            line-height: 70upx;
            border-radius: 50%;
            font-size: 36upx;
            text-align: center;
            background-color: #EBEEF5;
          }
          
          .text {
            margin-left: 25upx;
            
            text {
              
            }
          }
        }
      }
    }
  }
</style>
